<template>
 <div class="info">
   <div class="login" v-if="flag">
     <div><span>手机号：</span><input type="text" v-model="phone" class="phone"></div>
     <div><span>密码：：</span><input type="password" v-model="password" class="password"></div>
     <button @click="loginClick">登录</button>
   </div>
   <div class="content" v-else>
       <div class="wrapper">
         <img :src="infoObj.avatarUrl" alt="">
         <div class="bottom">
           <div class="name">{{infoObj.nickname}}</div>
           <div class="data">
             <div>
               <div>{{infoObj.gender}}</div>
               动态
             </div>
             <div>
               <div>{{infoObj.follows}}</div>
               关注
             </div>
             <div>
               <div>{{infoObj.followeds}}</div>
               粉丝
             </div>
           </div>
         </div>
       </div>
     <div class="box">
       <p class="create">我创建的歌单({{listArr.length-1}})</p>
       <router-link :to="`/details/${item.id}`" tag="div" class="list" v-for="(item,index) in listArr" :key="item.id" v-if="index!=0">
         <div class="details">
           <img :src="item.coverImgUrl" alt="">
           <p>{{ item.name }}</p>
         </div>
       </router-link>
     </div>
     </div>
 </div>
</template>

<script>
export default {
  data () {
    return {
      phone: '',
      password: '',
      flag: true,
      infoObj: {},
      listArr: [],
      uid: ''
    }
  },
  methods: {
    loginClick () {
      this.axios({
        params: {
          phone: this.phone,
          password: this.password
        },
        url: 'login/cellphone'
      }).then(res => {
        this.infoObj = res.data.profile
        this.flag = false
        this.uid = this.infoObj.userId
        this.getData()
      }).catch(function (error) {
        alert('请重新输入')
      })
    },
    getData () {
      this.axios({
        params: {
          uid: this.uid
        },
        url: 'user/playlist'
      }).then(res => {
        this.listArr = res.data.playlist
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info{
  .login{
    background-color: #fff;
    margin: 0px 20px;
    padding: 45px 50px;
    div{
      margin-top: 30px;
      span{
        margin-left: 200px;
      }
      input{
        width: 300px;
        height: 50px;
        margin-left: 100px;
        border-radius: 5px;
        font-size: 24px;
      }
    }
    button{
      width: 100px;
      height: 50px;
      margin-top: 70px;
      margin-left: 400px;
      border-radius: 5px;
      background: #fff;
    }
  }
  .content{
    background-color: #fff;
    margin: 0px 20px;
    padding: 45px 30px;
   .wrapper{
     display: flex;
     .bottom{
       width: 100%;
       .name{
         margin-left: 70px;
         margin-top: 30px;
         height: 80px;
         width: 87%;
         font-size: 30px;
         border-bottom: 1px solid #ccc;
       }
       .data{
         display: flex;
         margin-left: 70px;
         margin-top: 50px;
         font-size: 40px;
         justify-content: space-between;
       }
     }
   }
    .box{
      overflow: hidden;
      background-color: #fff;
      margin: 0px 20px;
      padding: 45px 0px;
      .create{
        font-size: 24px;
        border-bottom: 3px solid orange;
        background-color: #fff;
        margin: 0px 20px;
        padding: 20px 50px;
      }
      .list{
        float: left;
        margin-left: 50px;
        cursor: pointer;
        .details{
          margin-top: 40px;
          img{
            width: 300px;
          }
        }
      }
    }
    img{
      width: 300px;
    }
  }
}
</style>
